<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
  <title>上神-大猫咪</title>
  <script type="text/javascript">
  var screenSize = document.documentElement.getBoundingClientRect()
  var fontSize = screenSize.width / 750 * 100
  document.querySelector('html').style.fontSize = fontSize + 'px'
  </script>
  <link href="public/css/iSlider.css" rel="stylesheet">
  <style>
  body {
    margin: 0;
    padding: 0;
    background: #333;
    overflow: hidden;
    height: 100%;
    width: 100%;
  }
  
  /*ul wrapper*/
  #iSlider-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
  }
  
  #iSlider-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }
  
  #iSlider-wrapper li {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    list-style: none;
  }
  
  #iSlider-wrapper li img {
    max-width: 100%;
    max-height: 100%;
  }
  
  .page {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-origin: content-box;
    font-size: 0.28rem;
  }
  
  .page img {
    position: absolute;
  }
  
  @-webkit-keyframes rotating {
    0% {
      transform: rotate(0deg)
    }
    to {
      transform: rotate(1turn)
    }
  }
  
  @keyframes rotating {
    0% {
      transform: rotate(0deg)
    }
    to {
      transform: rotate(1turn)
    }
  }
  
  .music-icon {
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    z-index: 200;
    width: 0.6rem;
    height: 0.6rem;
    background-image: url(./public/music-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000000;
  }
  
  .music-icon.rotate {
    -webkit-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite;
  }

  .music-icon audio {
    display: none;
  }
  
  .peach {
    position: absolute;
    z-index: 100000;
    right: 0;
    width: 4.4rem;
  }
  
  #page1 {
    background-image: url('./public/image/page1/bg.jpg');
  }
  
  #page1 img:nth-of-type(1) {
    width: 1.24rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -85%);
  }
  
  #page1 img:nth-of-type(2) {
    width: 0.44rem;
    top: 3.34rem;
    left: 1.16rem;
  }
  
  #page1 img:nth-of-type(3) {
    width: 0.6rem;
    top: 3.8rem;
    left: 2.2rem;
  }
  
  #page1 img:nth-of-type(4) {
    width: 0.54rem;
    top: 4rem;
    left: 4.76rem;
  }
  
  #page1 img:nth-of-type(5) {
    width: 0.42rem;
    top: 3.56rem;
    left: 5.92rem;
  }
  
  #page2 {
    background-image: url('./public/image/page2/bg.jpg');
  }
  
  #page2 img:nth-of-type(1) {
    width: 1.3rem;
    top: 36%;
    left: 48%;
    transform: translate(-55%, -60%);
  }  
  
  #page3 {
    background-image: url('./public/image/page3-bg.jpg');
  }
  
  #page4 {
    color: #FFF;
  }
  
  #page4 img {
   width: 5rem;
   position: absolute;
   top: 1rem;
   left: 50%;
   transform: translate(-50%, 0);
  }
  
  #page4 .page-content {
    margin: 6.6rem 0.3rem 0.5rem;
  }
  
  .qrcode-text {
    margin: 0.2rem 0 0.3rem;
    text-align: center;
    font-size: 0.35rem;
  }
  
  table {
    margin: 0 auto;
  }
  
  table caption {
    font-weight: bold;
    font-size: 0.4rem;
    margin-bottom: 0.2rem;
  }
  
  table tr td:first-child {
    text-align: right;
  }
  #page4 .bottom {
    position: absolute;
    left: 50%;
    bottom: 0.2rem;
    transform: translate(-50%, 0);
  }
  </style>
</head>

<body>
  <div id="iSlider-wrapper"></div>
  <div class="music-icon rotate">
    <audio loop="true" src="./public/music.mp3" autoplay="true" preload=""></audio>
  </div>

  <img class="peach" src="./public/image/peach.gif">
  <div id="hidden-space" style="display:none">
    <div id='page1' class="page">
      <img src="./public/image/page1/a0.png">
      <img src="./public/image/page1/a1.png">
      <img src="./public/image/page1/a2.png">
      <img src="./public/image/page1/a3.png">
      <img src="./public/image/page1/a4.png">
    </div>
    <div id='page2' class="page">
      <img src="./public/image/page2/a0.png">
    </div>
    <div id='page3' class="page">
    </div>
    <div id='page4' class="page">
      <img src="./public/image/qrcode.jpg">
      <div class="page-content">
        <div class="qrcode-text">关注公众号，大喵咪带你一起玩</div>
        <section class="activity-section">
          <div class="content">
            <table>
              <caption>本次活动详情</caption>
              <tr>
                <td>活动内容：</td>
                <td>看三生三世电影 + KTV</td>
              </tr>
              <tr>
                <td>时间：</td>
                <td>周日（2017-08-06）下午</td>
              </tr>
              <tr>
                <td>地点：</td>
                <td>根据参加人员选择滨江星光大道或市区</td>
              </tr>
            </table>
          </div>
        </section>
      </div>
      <div class="bottom">create by 上神-大喵咪</div>
    </div>
  </div>
  <script type="text/javascript" src="public/js/iSlider.min.js"></script>
  <script type="text/javascript" src="public/js/iSlider.animate.min.js"></script>
  <script>

  var audioCtrl = {
    musicIconEle: document.querySelector('.music-icon'),
    ele: document.querySelector('audio'),
    lastClick: Date.now()
  }
  
  audioCtrl.musicIconEle.addEventListener('click', function() {
    if(Date.now() - audioCtrl.lastClick < 500) {
      return false
    }
    audioCtrl.lastClick = Date.now()
    if(audioCtrl.ele.paused) {
      audioCtrl.ele.play()
      audioCtrl.musicIconEle.setAttribute('class', 'music-icon rotate')
    } else {
      audioCtrl.ele.pause()
      audioCtrl.musicIconEle.setAttribute('class', 'music-icon')
    }
  }, false)

  document.addEventListener('DOMContentLoaded', function() {
    function audioAutoPlay() {
      audioCtrl.ele.play();
      document.addEventListener("WeixinJSBridgeReady", function() {
        audioCtrl.ele.play();
      }, false);
    }
    audioAutoPlay();
  });

  var list = [{
      content: document.querySelector('#hidden-space > #page1')
    }, {
      content: document.querySelector('#hidden-space > #page2')
    }, {
      content: document.querySelector('#hidden-space > #page3')
    }, {
      content: document.querySelector('#hidden-space > #page4')
    },

  ];

  var S = new iSlider(document.getElementById('iSlider-wrapper'), list, {
    isLooping: true,
    isOverspread: 1,
    isAutoplay: 1,
    animateTime: 3000,
    animateType: 'rotate',
    duration: 3000,
    wakeupAutoplayDazetime: 2000,
    isVertical: false,
    fillSeam: true
  });
  </script>
</body>

</html>
